<template>
	<view class="box">
		<view class="cu-form-group">
			<view class="title">姓名</view>
			<input placeholder="请输入姓名" name="input"></input>
		</view>
		
		<radio-group class="block" @change="RadioChange">
			<view class="cu-form-group">
				<view class="title">定义颜色</view>
				<view class="sexChoose">
					<view class="">
						<radio class='blue radio' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C"></radio>
						<text>先生</text>
					</view>
					<view class="">
						<radio class='blue radio' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio>
						<text>女士</text>
					</view>
					
				</view>
			</view>
		</radio-group>
		
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input placeholder="输入框手机号" name="input"></input>
			<view class="cu-capsule radius">
				<view class='cu-tag bg-blue '>
					+86
				</view>
				<view class="cu-tag line-blue">
					中国大陆
				</view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">身份证号码</view>
			<input placeholder="请输入身份证号码" name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">充值金额</view>
			<input placeholder="请输入金额" name="input"></input>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">备注</view>
			<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="备注不要超过100字"></textarea>
		</view>
		<button class="cu-btn bg-blue shadow">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'A',
			}
		},
		methods: {
			RadioChange(e) {
				this.radio = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	.box{
		width: 750rpx;
		height: 100%;
		.cu-form-group{
			border-top: 1rpx solid #eee;
			.sexChoose{
				padding: 0 70rpx;
				width: 500rpx;
				display: flex;
				justify-content: space-between;
				view{
					text{
						margin-left: 20rpx;
					}
				}
			}
		}
		button{
			position: absolute;
			left: 50%;
			bottom: 200rpx;
			margin-left: -150rpx;
			width: 300rpx;
		}
	}

</style>
